<template>
  <n-space vertical size="large">
    <n-layout has-sider>
      <n-layout-sider :class="{ expendSmallScreen: width < 800 && !collapsed }" show-trigger :collapsed-width="0"
        :collapsed="collapsed" @collapse="collapsed = true" @expand="collapsed = false">
        <slot name="sider" />
      </n-layout-sider>
      <n-layout>
        <n-layout-header>
          <slot name="header" />
        </n-layout-header>
        <n-layout-content>
          <slot />
        </n-layout-content>
        <n-layout-footer>
          <slot name="footer" />
        </n-layout-footer>
      </n-layout>
    </n-layout>
  </n-space>
</template>
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
const collapsed = useMyLocalStorage('collapsed', false)
const { width } = useWindowSize()
</script>
<style lang="scss">
.expendSmallScreen {
  width: 100vw !important;
  max-width: unset !important;
}
</style>